<template>
  <div class="list">
    <div class="list_breadcrumb">
      <span>首页 </span>
      <span>> </span>
      <span>母婴专区</span>
    </div>
    <div class="classify">
      <dl>
        <dt>分类 ：</dt>
        <dd><router-link to="/list_mu">母婴专区</router-link></dd>
        <dd><router-link to="/list_bao">食品保健</router-link></dd>
        <dd><router-link to="/list_mei">美妆个护</router-link></dd>
        <dd><router-link to="/list_shi">时尚轻奢</router-link></dd>
      </dl>
      <dl class="brand">
        <dt>品牌 ：</dt>
        <div style="display:flex">
          <dd><span @click="list_show('阿玛尼',1)">阿玛尼</span></dd>
          <dd><span @click="list_show('DW',1)">DW</span></dd>
          <dd><span @click="list_show('KEITH',1)">KEITH</span></dd>     
        </div>
      </dl>
      <dl>

        <dt>贸易类型 ：</dt>
        <dd class="trade"><router-link to="#">一般贸易</router-link></dd>
        <dd><router-link to="#">海外直销</router-link></dd>
      </dl>
    </div>
    <div class="sales">
      <div class=""><router-link to="#">销量</router-link></div>
      <div class=""><router-link to="#">价格</router-link></div>
      <div class=""><router-link to="#">上架时间</router-link></div>
    </div>


    <div class="list_content" v-if="a=='shi_all'">
      <div class="con1" v-for="p of page_shi" :key="p.pid">
        <div class="img1">
          <router-link :to="`/details/${p.pid}`"><img :src="p.img_lg"></router-link>
        </div>
        <div class="haiwai1">海外直销</div>
        <div class="price1">
          <div>¥ {{p.price}}</div>
          <div>已售出 666件</div>
        </div>
        <div class="title1">{{p.title1}}</div>
      </div>
      <div class="con1 con12">
        <div class="img2"><img src="/img/list/next1.png"></div>
      </div>
      <div class="page-bar">
        <ul>
          <li class="pageLi" v-if="i>1"><span>上一页</span></li>
          <li class="pageLi" v-for="i of allPage" :key="i" @click="getPage('shi_all',i)">{{i}}</li>
          <li class="pageLi" >下一页</li>
        </ul>
      </div>
    </div>

    <div class="list_content" v-else>
      <div class="con1" v-for="p of list" :key="p.pid">
        <div class="img1">
          <router-link :to="`/details/${p.pid}`"><img :src="p.img_lg"></router-link>
        </div>
        <div class="haiwai1">海外直销</div>
        <div class="price1">
          <div>¥ {{p.price}}</div>
          <div>已售出 666件</div>
        </div>
        <div class="title1">{{p.title1}}</div>
      </div>
      <div class="con1 con12">
        <div class="img2"><img src="/img/list/next1.png"></div><!-- 下一页图片 -->
      </div>
      <div class="page-bar">
        <ul>
          <li class="pageLi" v-if="i>1"><span>上一页</span></li>
          <li class="pageLi" v-for="i of allPage" :key="i" @click="list_show(`${a}`,i)">{{i}}</li>
          <li class="pageLi" >下一页</li>
        </ul>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  data(){
    return {
      page_all:[],
      page_shi:[],
      allPage: 10, //总页数
      i: 1,//当前页码
      list:[],
      a:"shi_all",
    }
  },
  methods:{
    list_show(classi,i){
      this.a=classi;
      this.axios.get("/ub/lista",{params:{classi:classi,i:i}}).then(result=>{
        this.list=result.data
      })
    },

    getPage(classi,i){
      this.a=classi;
      this.axios.get("/ub/list",{params:{classi:classi,i:i}}).then(result=>{
        this.page_all = result.data;
        this.page_shi=[];   
        this.page_all.forEach(item => {
          if(item.classi=="shi_all"){
            this.page_shi.push(item)
            // console.log(this.page_shi)
          }
        });       
      })      
    },
  },
  mounted(){
    this.getPage("shi_all",1);
  }
}
</script>

<style scoped>

.list .page-bar{
  width: 1200px;
  height: 21px;
  padding: 10px 0;
}
.list .page-bar ul{
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
}
.list .pageLi{
  margin-left: 8px;
  padding: 7px 11px;
  border: 1px solid #eee;
  cursor: pointer;
  border-radius: 2px;
} 
.list .pageLi:hover{
  border-color: #666;
}


.list{
  width: 1200px;
  margin: 0 auto;
  font-size: 13px;
}
.list .list_breadcrumb{
  text-align: left;
  padding: 10px 0;
  color: #666;
}
.list .list_breadcrumb>span:nth-child(2){
  color: #bbb;
}
.list .classify{
  text-align: left;
}
.list .classify .brand dd{
  cursor: pointer;
}
.list .classify dl{
  color: #999;
  display: flex;
  padding: 10px 0 10px 20px;
}
.list .classify dl dd a,.list .classify .brand dd{
  color: #666;
  margin-left: 25px;
}
.list .classify dl dd a:hover,.list .classify .brand dd:hover{
  color: #c3625d;
}
.list .classify .trade{
  margin-left: -25px;
}
.list .sales{
  display: flex;
  font-size: 16px;
  padding: 10px 0 10px 20px;
}
.list .sales div{
  margin-right: 25px;
}
.list .sales a{  color: #666; }
.list .sales a:hover{ color: #E73736; }
.list .list_content{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.list .list_content .con1{
  width: 262px;
  height: 360px;  
  overflow: hidden;
  border: 1px solid #fff;
  margin-bottom: 10px;
  padding: 5px 10px;
  position: relative;
}
.list .list_content .con12{
  height: 344px;
}
.list .list_content .con1:hover{
  border: 1px solid #eee;
  box-shadow: 0 0 6px 2px #eee;
}
.list .list_content .con1 .img1{
  width: 260px;
  height: 260px;
  overflow: hidden;
}
.list .list_content .con1 .img1 img:hover{
  transform: scale(1.1);
  overflow: hidden;

}
.list .list_content .con1 .img1 img{
  width: 100%;
  transition: 1S;
}
.list .list_content .con1 .haiwai1{
  text-align: right;
  color: #36e754;
  position: relative;
}
.list .list_content .con1 .price1{
  color: #E73736;
  font-size: 20px;
  text-align: left;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.list .list_content .con1 .price1>div:last-child{
  color: #646464;
  font-size: 12px;
  line-height: 20px;
}
.list .list_content .con1 .title1{
  font-size: 16px;
  color: #666;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list_content .con1 .haiwai1,.list .list_content .con1 .price1,.list .list_content .con1 .title1{
  padding: 0 5px;
}
</style>